<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加类别</title>
</head>
<body>
<div th:replace="admin/header :: header"></div>
<div class="main">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-row">
                <div class="layui-col-md4"
                     style="margin-top: 20px;padding: 0px 10px 0 10px">
                    <div class="pane-title">添加类别</div>
                    <form title="新建类别" class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">编号</label>
                            <div class="layui-input-block">
                                <input class="layui-input" name="id">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">类别名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" name="name">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="*">立即添加</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-col-md8"
                     style="margin-top:20px;padding: 10px;border: 1px solid #32323232;border-radius:5px;padding: 0px 10px 0 10px">
                    <div class="pane-title">已有类别</div>
                    <table id="demo" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'form', 'jquery', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;
        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/admin/category/list' //数据接口
            , page: true //开启分页
            , title: '已有分类'
            , cols: [
                [ //表头
                    {field: 'id', title: '编号', minWidth: 100, sort: true}
                    , {field: 'name', title: '类别名称', minWidth: 100}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 100}
                ]
            ]
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.name
                }, function (value, index) {
                    $.ajax({
                        url: './category/update',
                        type: 'post',
                        data: {id: obj.data.id, name: value},
                        success: function (res) {
                            console.log(res)
                            if (res.status === 200) {
                                console.log(obj)
                                obj.update({
                                    name: res.data.name
                                });
                            } else {
                                layer.msg(res.data)
                            }
                            layer.close(index);
                        },
                        error: function (xhr, status, error) {
                            layer.close(index);
                        }
                    })
                });
            }
        });

        // 表单提交
        form.on('submit(*)', function (data) {
            $.ajax({
                url: "./category/add",
                type: "POST",
                data: data.field,
                success: function (data) {
                    if (data.status === 200) {
                        layer.msg("添加成功");
                    } else if (data.status === 201) {
                        layer.msg(data.data)
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg("网络请求失败", {icon: 2})
                }
            });
            return false; //阻止表单跳转。
        });

    });
</script>
</body>
</html>